<template>
  <div class="box">
    <el-row :gutter="20">
      <el-col :span="16"
        ><div class="grid-content bg-purple">
          <div class="login-left">
            <h1>Weblog 博客登录</h1>
            <img
              class="login-img"
              src="http://47.104.167.34:9110/assets/login-logo-57e339e7.png"
              alt=""
            />
          </div></div
      ></el-col>
      <el-col :span="8"
        ><div class="grid-content bg-purple">
          <div class="login-right">
            <el-form
              :model="ruleForm"
              :rules="rules"
              ref="ruleForm"
              class="demo-ruleForm"
            >
              <div class="login-title">
                <h1>欢迎回来</h1>
                <span>———————账号密码登录———————</span>
              </div>
              <el-form-item prop="username">
                <el-input
                  v-model="ruleForm.username"
                  placeholder="请输入用户名"
                ></el-input>
              </el-form-item>
              <el-form-item prop="password">
                <el-input
                  v-model="ruleForm.password"
                  placeholder="请输入密码"
                  show-password
                ></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="loginFun('ruleForm')"
                  >登录</el-button
                >
              </el-form-item>
            </el-form>
          </div>
        </div></el-col
      >
    </el-row>
  </div>
</template>

<script>
import { Login } from "../units/api.js";
export default {
  data() {
    return {
      ruleForm: {
        username: "",
        password: "",
      },
      rules: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
        ],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
      },
    };
  },

  methods: {
    loginFun(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          try {
            let res = await Login(this.ruleForm);
            // 登录成功逻辑
            localStorage.setItem("token", res.data.data.token);
            this.$message({ message: "登录成功", type: "success" });
            this.$router.push("/BackHome");
          } catch (error) {
            // 处理登录失败（如密码错误）
            this.$message({
              message: error.response?.data?.message || "用户名或密码错误",
              type: "error",
            });
          }
        } else {
          this.$message({ message: "请检查输入", type: "error" });
        }
      });
    },
  },
};
</script>

<style scoped>
.box {
  width: 100vw;
  height: 100vh;
  background-color: #001428;
}
.el-row {
  width: 100vw;
}
.login-img {
  width: 450px;
}
.login-left {
  margin: 0 auto;
  color: #fff;
}
.login-left > h1 {
  font-size: 4vw;
}
.login-right {
  height: 100vh;
  padding: 30px;
  padding-top: 100px;
  background-color: white;
}
.login-title > span {
  display: block;
  margin: 20px 0;
  color: #bbb;
}
</style>